<script>
import { nextTick,onMounted,ref } from 'vue'

export default {
  name: 'App',
  components: {
    // Header,
    // ButtonPage
  },
  data(){
    return {
      headerTitle:'聚造',
      count:0,
      inputValue:'Hello World'
    }
  },
  computed:{
    msg2(){
      return this.msg1 + ' 2'
    }
  },
  // watch:{
  //   msg1(newMsg1, oldMsg1){
  //     console.log(newMsg1, ':',oldMsg1)
  //   },
  //   msg2(newMsg2, oldMsg2){
  //     console.log(newMsg2, ':',oldMsg2)
  //   }
  // },
  methods:{
    headerChange(value){
      this.count = value
    }
  },
  // setup(){
  //   console.log('I am setup')

  //   onMounted(()=>{
  //     console.log('I am mounted 1')
  //   })
  // },
  setup(){
    let msg1 = ref('Hello')
    return {
      msg1
    }
  },
  beforeCreate(){
    console.log('im beforCreate')
  },
  created(){
    console.log('I am created')
  },
  beforeMount(){
    console.log('I am beforeMount')
  },
  async mounted(){
    // this.msg1 = 'World'
    console.log('I am mounted 2')
    console.log(this.$refs,this.$refs.input)
    // this.$refs.input.focus()
    this.headerTitle = '就业系统'
    // let data = ajax.get('//')
    // this.data = data
  }
}
</script>

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<style scoped>
.red{
  color:#ff0000;
}
.green{
  color:#00ff00;
}
</style>
